
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" />
<html xmlns="http://www.w3.org/1999/xhtml" />
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta name="Author" content="Van Khuong" />
    <title>Demo | CSS tạo hình tam giác, tooltip</title>
</head>
<style type="text/css">
    div{margin: 50px 10px; float: left;}
    .triangle{
        border-color: blue orange red green;
        border-style: solid;
        border-width: 50px;
        height: 0px;
        width: 0px;
    }
        /* Tạo tam mũi tên hướng lên trên */
    .arrow-up {
        width:0px;
        height:0px;
        border-left:50px solid transparent;
        border-right:50px solid transparent;
        border-bottom:50px solid #2f2f2f; /* Tam giác dưới được đổ màu */
    }

        /* Tạo mũi tên hướng xuống */
    .arrow-down {
        width:0px;
        height:0px;
        border-left:50px solid transparent;
        border-right:50px solid transparent;
        border-top:50px solid #2f2f2f; /* Tam giác trên được đổ màu */
    }

        /* Tạo mũi tên hướng bên trái */
    .arrow-left {
        width:0px;
        height:0px;
        border-bottom:50px solid transparent;
        border-top:50px solid transparent;
        border-right:50px solid #2f2f2f; /* Tam giác phải được đổ màu */

    }

        /* Tạo mũi tên hướng bên phải */
    .arrow-right {
        width:0px;
        height:0px;
        border-bottom:50px solid transparent;
        border-top:50px solid transparent;
        border-left:50px solid #2f2f2f; /* Tam giác trái được đổ màu */
    }
    .arrow-box{
        position: relative;
        width: 280px;
        height: 80px;
        background: #206d97;
        border: 4px solid #4ec7ab;
    }
    .arrow-box:after, .arrow-box:before{
        width:0;
        height:0;
        content: "";
        position: absolute;
        bottom: 100%;
    }
    .arrow-box:after{
        border: 20px solid transparent;
        border-bottom-color: #206d97;
        left: 5px;
    }
    .arrow-box:before{
        border: 25px solid transparent;
        border-bottom-color: #4ec7ab;
    }
</style>
<body>
<header>
    <h1 class="title">Demo | CSS tạo hình tam giác, tooltip</h1>
    <p class="credits"><em>by:</em> <a href="http://www.sothichweb.com/">sothichweb.com</a></p>
</header>
<article>
    <div id="" class="triangle"></div>
    <div id="" class="arrow-up"></div>
    <div id="" class="arrow-down"></div>
    <div id="" class="arrow-left"></div>
    <div id="" class="arrow-right"></div>
    <div class="arrow-box"></div>
</article>
</body>
</html>

